Nhảy tới nội dung

Vẽ hình khối, đường dẫn (paths) và văn bản

Vẽ đồ họa trên HTML5 canvas bằng các hình khối và đường dẫn (paths). Tạo hình chữ nhật, hình tròn, đường thẳng, hình tam giác và các hình dạng phức tạp hơn bằng đường dẫn SVG.

Vẽ hình khối bằng đường dẫn​

Đối tượng CanvasRenderingContext2D chỉ hỗ trợ hai hình nguyên thủy là hình chữ nhật và đường dẫn (path):

  • Rectangles (Hình chữ nhật) - Dùng cho hình chữ nhật và hình vuông.
  • Paths (Đường dẫn) - Dùng cho hình tròn, đường thẳng, hình tam giác và nhiều hình dạng khác.

Đường dẫn bắt đầu bằng việc gọi beginPath() trên context. Sau đó bạn định nghĩa hình dạng đường dẫn rồi gọi fill() hoặc stroke() để vẽ.

Cách vẽ hình tròn​

context.beginPath();
context.arc(200, 100, 50, 0, 2 * Math.PI);
context.fill();

Hình tròn

Hàm arc(x, y, radius, startAngle, endAngle) tạo một đường cong hình cung. Với startAngle = 0 và endAngle = 2 * Math.PI, nó tạo thành một hình tròn hoàn chỉnh.

Cách vẽ một đường thẳng cơ bản​

context.beginPath();
context.moveTo(50, 50);
context.lineTo(250, 150);
context.stroke();

Đường thẳng

moveTo() xác định điểm bắt đầu, lineTo() vẽ đường thẳng đến tọa độ mới và stroke() làm hiển thị đường thẳng đó.

Vẽ hình tam giác​

context.beginPath();
context.moveTo(200, 100);
context.lineTo(250, 150);
context.lineTo(250, 50);
context.fill();

Hình tam giác

Khi gọi fill(), cạnh cuối cùng của tam giác sẽ tự động nối lại từ điểm kết thúc về điểm bắt đầu.

Sự khác biệt giữa Fill và Stroke​

  • Fill: Tô kín toàn bộ bề mặt hình dạng bằng màu sắc.
  • Stroke: Chỉ vẽ đường viền ngoài của hình dạng.

Fill và Stroke

Vẽ đường dẫn SVG lên canvas​

Bạn có thể sử dụng đối tượng Path2D để vẽ các đường dẫn SVG phức tạp:

let path = new Path2D('M 104.22331,133.37668 C -1.5072094,-35.219492 103.13006,33.890796 103.13006,33.890796 c 0,0 101.73939,-69.935966 1.09325,99.485884 z');

context.beginPath();
context.strokeStyle = '#0099b0';
context.fillStyle = '#ff8080';
context.stroke(path);
context.fill(path);

Vẽ văn bản​

Để vẽ một dòng chữ đơn giản, sử dụng hàm fillText():

context.font = '40px Arial';
context.fillStyle = 'black';
context.fillText("TITOX Games", 300, 100);